import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Icon, Tooltip } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart, WeaNewScroll, WeaSelect, WeaAlertPage, WeaTab } from "ecCom";
import * as cct from '../../constants/CommonConstant';
import * as rct from '../../constants/ReportConstant';
import "./style/index.css";

@inject('contractPayPlanYOYStore')
@observer
class ContractPayPlanYOYReport extends React.Component {

    constructor(props) {
        super(props);
    }


    componentWillUpdate() {

    }

    componentDidUpdate() {
        if (this.refs.chart) {
            this.refs.chart.paint();
        }
    }

    componentWillReceiveProps(nextProps){
        
        const flag = this.props.hasOwnProperty("location");
        if(flag){
            const keyOld = this.props.location.key;
            const keyNew = nextProps.location.key;
            if(keyOld!=keyNew){
                const store = this.props.contractPayPlanYOYStore;
                store.reLoad();
            }
        }
    }

    render() {
        const store = this.props.contractPayPlanYOYStore;

        let { tableStore, loading, names,contract_amounts_sr,contract_amounts_zc, showList } = store;
        names = toJS(names);
        contract_amounts_sr = toJS(contract_amounts_sr);
        contract_amounts_zc = toJS(contract_amounts_zc);
        const config = [
            rct.year
        ];

        const option = {
            color: rct.colors,
            title: {
                // text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['收入','支出']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                // feature: {
                //     saveAsImage: {}
                // }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'收入',
                    type:'line',
                    data:contract_amounts_sr
                },
                {
                    name:'支出',
                    type:'line',
                    data:contract_amounts_zc
                }
            ]
        };
        
        
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={loading}
                    title={"资金计划"}
                    icon={<i className={cct.icon} />}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[<span className="wea-contract-showlist">
                    <Tooltip title={`${showList?'隐藏列表':'显示列表'}`}>
                        <span className={`icon ${showList?'cur':''}`} onClick={this.changeShowList.bind(this, showList)}>
                            <i className={`icon-coms-List`} />
                        </span>
                    </Tooltip>
                </span>
                ]}
                    buttonSpace={10}
                >
                    <div className="wea-contract-report">
                        <div className="content">
                            <WeaNewScroll height='100%' toTop={true}>
                                <div className="scroll-content">
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaRadioGroup config={config} onChange={(params) => { store.doSearch(params) }} />
                                    </div>
                                    <div class="card-report" >
                                        {
                                            (names.length > 0 ?
                                                <WeaEchart ref={"chart"} option={option} useDefault={false} /> :
                                                <WeaAlertPage icon="icon-coms-blank">
                                                    <div>暂无数据</div>
                                                </WeaAlertPage>
                                            )
                                        }

                                    </div>
                                    {(
                                        showList&&
                                        <div style={{ paddingTop: "10px" }}>
                                            <WeaTable hasOrder={true} comsWeaTableStore={tableStore} getColumns={c => this.reRenderColumns(c)}/>
                                        </div>
                                    )}
                                </div>
                            </WeaNewScroll>
                        </div>
                    </div>
                </WeaTop>
            </WeaRightMenu>
        );
    }

   

    reRenderColumns(columns){
        let that = this;
        const store = that.props.contractPayPlanYOYStore;
        columns.forEach(c=>{
            if(c.dataIndex=='plan_count_sr'){
                c.render = function(text, record){
                    return <span>{record.plan_count_sr||0}</span>
                }
            }else if(c.dataIndex=='plan_count_zc'){
                c.render = function(text, record){
                    return <span>{record.plan_count_zc||0}</span>
                }
            }else if(c.dataIndex=='pre_plan_count_sr'){
                c.render = function(text, record){
                    let counts = record.plan_count_sr||0;
                    let precounts = record.pre_plan_count_sr||0;
                    let percent=0;
                    if(counts>0&&precounts==0) percent = 100;
                    else if(counts==0&&precounts>0) percent = -100;
                    else if(counts==0&&precounts==0) percent = 0;
                    else percent = (counts-precounts)/precounts*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            }else if(c.dataIndex=='pre_plan_count_zc'){
                c.render = function(text, record){
                    let sumamount = record.plan_count_zc||0;
                    let presumamount = record.pre_plan_count_zc||0;
                    let percent;
                    if(sumamount>0&&presumamount==0) percent = 100;
                    else if(sumamount==0&&presumamount>0) percent = -100;
                    else if(sumamount==0&&presumamount==0) percent = 0;
                    else percent = (sumamount-presumamount)/presumamount*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            } else {
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span title={valueSpan} dangerouslySetInnerHTML={{__html: valueSpan}}></span>
                }
            }
        })
        return columns;
    }

    changeShowList = (bl, e) => {
        e.preventDefault();
        e.stopPropagation();
        const { changeShowList } = this.props.contractPayPlanYOYStore;
        changeShowList(bl);
    }
}

export default ContractPayPlanYOYReport;